<template>
  <div class="transaction-service-list bg-c-fff right-height mb70">
    <p class="bread rel">
      <a href="javascript:void(0);" class="font-s-16">交易监控订单管理-信息中心</a>
    </p>
    <div class="content">
      <choose-type typename="操作状态" valuename="orderType" :itemlist="orderlist" :active="orderActive" @typechanged="onOptionChanged"></choose-type>
      <choose-type typename="监控类型" valuename="transType" :itemlist="translist" :active="transActive" @typechanged="onOptionChanged"></choose-type>
      <table width="100%" class="auto">
        <tr>
          <th>订单时间</th>
          <th>编号</th>
          <th>申请监控方</th>
          <th>监控类型</th>
          <th>已上传资质报告</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in list">
          <td>{{item.createTime}}</td>
          <td>{{item.id}}</td>
          <td>{{item.businessName}}</td>
          <td>{{item.monitorType | monitorTypeFilter}}</td>
          <td>{{item.reportNum}}份</td>
          <td>
            <a href="javascript:void(0);" target="_blank">
              <button class="blue-button small-btn-css" @click="jump(item.id)">查看详情</button>
            </a>
            <button class="blue-button small-btn-css" @click="startUpload(item.id)">上传报告</button>
          </td>
        </tr>
      </table>
      <div class="no-data-tip" v-show="list.length===0">暂无相关数据</div>
      <div class="fix foot-box">
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.list!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
    <vodal :show="upLoadShow" animation="zoom" :width="400" :height="250" @hide="upLoadShow=false">
      <div class="vodal-main">
        <h4>上传资质审查报告</h4>
        <div class="con">
          <p>上传报告：
            <button class="blue-button xl-btn-css" id="selectBtn">上传</button>
          </p>
          <div class="fix">
            <span class="db flo-left">选择接收方：</span>
            <div class="flo-left checkbox-box" v-for="(item, i) in businessList">
              <input type="checkbox" name="" :id="i" :value="i" v-model="index">
              <label :for="i">{{item.memberName}}</label>
            </div>
          </div>
        </div>
        <div class="btn-box auto tc">
          <button type="button" class="blue-button xl-btn-css" @click="confirmUpload">确认</button>
          <button type="button" class="blue-button xl-btn-css" @click="upLoadShow=false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
import FileUploaderManager from '../components/FileUploaderManager'
export default {
  components: {
    Pagination,
    ChooseType,
    FileUploaderManager
  },
  data() {
    return {
      share: '0',
      pageIndex: 1,
      pageTotal: 0,
      upLoadShow: false,
      isUpload: '',
      orderActive: '',
      list: [],
      transactionList: [],
      address: '',
      id: '',
      ids: '',
      names: '',
      memberId: '',
      index: [],
      otherBusiness: [],
      businessList: [],
      orderlist: [{
        value: '',
        text: '全部'
      }, {
        value: '1',
        text: '待上传'
      }, {
        value: '2',
        text: '已上传'
      }],
      transActive: '',
      translist: [{
        value: '',
        text: '全部'
      }, {
        value: '1',
        text: '单方监控'
      }, {
        value: '2',
        text: '双方监控'
      }, {
        value: '3',
        text: '多方监控'
      }]
    }
  },
  mounted() {
    this.onPageChange(1)
    this.initUploader()
  },
  methods: {
    onPageChange(n) {
      this.getData(n)
    },
    startUpload(id) {
      this.upLoadShow = true
      this.id = id
      this.address = ''
      if (this.upLoadShow) {
        this.$http.post('/transactionMonitorSer/center/prUploadReport', {
          id: id
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.businessList = data.data.rows
          } else {
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络错误')
        })
      }
    },
    onOptionChanged(type, value) {
      if (type === 'orderType') {
        this.orderActive = value
        if (value === '') {
          this.isUpload = ''
          this.onPageChange(1)
        }
        if (value === '1') {
          this.isUpload = false
          this.onPageChange(1)
        }
        if (value === '2') {
          this.isUpload = true
          this.onPageChange(1)
        }
      }
      if (type === 'transType') {
        this.transActive = value
        this.onPageChange(1)
      }
    },
    getData(n) {
      this.$http.get('/transactionMonitorSer/center/read/list', {
        params: {
          monitorType: this.transActive,
          isUpload: this.isUpload,
          page: n,
          rows: 10
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.list = data.data.rows
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.rows.length / 10)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    jump(id) {
      this.$router.push('/message-center-details?id=' + id)
    },
    confirmUpload() {
      for (var i = 0; i < this.index.length; i++) {
        this.ids += this.businessList[this.index[i]].memberId + ','
        this.names += this.businessList[this.index[i]].memberName + ','
      }
      if (this.address.length === 0) {
        this.$toasted.show('请选择上传文件')
        return
      }
      if (this.index.length !== 0) {
        this.$http.post('/transactionMonitorSer/center/uploadReport', {
          id: this.id,
          address: this.address,
          ids: this.ids.substring(0, this.ids.lastIndexOf(',')),
          names: this.names.substring(0, this.names.lastIndexOf(','))
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.$toasted.show('资质审查报告已发送')
            this.getData(this.pageIndex)
            this.upLoadShow = false
            this.empty()
          } else {
            this.$toasted.show(data.data.msg)
            this.empty()
          }
        }).catch(err => {
          console.log(err)
          this.$toasted.show('网络错误')
        })
      } else {
        this.$toasted.show('请选择发送方')
      }
    },
    initUploader() {
      this.uploader = new FileUploaderManager('qualification-report', 'selectBtn', (url) => {
        this.address = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      }, true)
    },
    empty() {
      this.address = ''
      this.index = []
      this.ids = ''
      this.names = ''
    }
  },
  filters: {
    monitorTypeFilter(v) {
      if (v === 1) {
        return '单方监控'
      }
      if (v === 2) {
        return '双方监控'
      }
      if (v === 3) {
        return '多方监控'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.content {
  padding: 0 35px;
}

.right-height {
  min-height: 700px;
}

.bread {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 45px;
}

.content {
  margin-top: 30px;
}


.foot-box {
  padding: 35px 0px 0px 0px;
}

.pagination {
  width: auto!important;
  margin: 0 auto!important;
}

.vodal-main .con p {
  margin-bottom: 15px;
}

.checkbox-box {
  /*width: 258px;*/
  margin-left: 15px;
}

.checkbox-box input {
  margin-bottom: 15px;
}

</style>
